<template>
  <div class="visit-list-container">
    <div class="table-container">
      <!-- 表格头部 -->
      <div class="table-header">
        <div class="header-cell" :style="{ width: columnWidths.time + 'px' }">
          时间
          <div class="resize-handle" @mousedown="startResize('time', $event)"></div>
        </div>
        <div class="header-cell" :style="{ width: columnWidths.subject + 'px' }">
          主题
          <div class="resize-handle" @mousedown="startResize('subject', $event)"></div>
        </div>
        <div class="header-cell" :style="{ width: columnWidths.host + 'px' }">
          主持人
          <div class="resize-handle" @mousedown="startResize('host', $event)"></div>
        </div>
        <div class="header-cell" :style="{ width: columnWidths.location + 'px' }">
          地点
          <div class="resize-handle" @mousedown="startResize('location', $event)"></div>
        </div>
        <div class="header-cell" :style="{ width: columnWidths.customer + 'px' }">
          客户
          <div class="resize-handle" @mousedown="startResize('customer', $event)"></div>
        </div>
        <div class="header-cell actions-header">操作</div>
      </div>

      <!-- 表格内容 -->
      <div class="table-body">
        <template v-for="item in list" :key="item.scheduleId">
          <div class="table-row">
            <div
              class="table-cell time-cell"
              :style="{ width: columnWidths.time + 'px' }"
            >
              <div class="time-content">
                <span class="time"
                  >{{ formatTime(item.upcomingStartTime) }} -
                  {{ formatTime(item.upcomingEndTime) }}</span
                >
                <span class="date">{{ formatDate(item.upcomingStartTime) }}</span>
              </div>
            </div>
            <div class="table-cell" :style="{ width: columnWidths.subject + 'px' }">
              <div class="subject-content">
                <span class="subject-text">{{ item.subject }}</span>
                <span v-if="!item.completed" class="status-badge">待进行</span>
              </div>
            </div>
            <div class="table-cell" :style="{ width: columnWidths.host + 'px' }">
              {{ item.hostName }}
            </div>
            <div class="table-cell" :style="{ width: columnWidths.location + 'px' }">
              {{ item.location || "-" }}
            </div>
            <div class="table-cell" :style="{ width: columnWidths.customer + 'px' }">
              {{ item.salesMateCustomerName || "-" }}
            </div>
            <div class="table-cell actions-cell">
              <button class="action-btn edit" @click="handleEdit(item)">编辑</button>
              <button class="action-btn delete" @click="handleDelete(item)">删除</button>
            </div>
          </div>
        </template>
      </div>

      <!-- 空状态 -->
      <div v-if="list.length === 0" class="empty-state">
        <p class="empty-text">暂无访问计划</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { getPlanListAPI } from "@/services/myXmate";
import dayjs from "dayjs";
import { useRouter } from "vue-router";

const router = useRouter();

const list = ref([]);

// 列宽度管理
const columnWidths = reactive({
  time: 120,
  subject: 200,
  host: 100,
  location: 120,
  customer: 150,
});

// 拖拽状态
const resizeState = reactive({
  isResizing: false,
  currentColumn: "",
  startX: 0,
  startWidth: 0,
});

onMounted(() => {
  getData();
  // 添加全局鼠标事件监听
  document.addEventListener("mousemove", handleMouseMove);
  document.addEventListener("mouseup", handleMouseUp);
});

const startTime = ref(dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"));
const endTime = ref(dayjs().add(1, "month").format("YYYY-MM-DD HH:mm:ss"));

async function getData() {
  const params = {
    completed: null,
    showAssistMeeting: true,
    startTime: startTime.value,
    endTime: endTime.value,
    visitType: "all",
    dptIds: [],
  };
  const data = await getPlanListAPI(params);
  console.log(data);
  list.value = data.datas;
}

// 格式化时间显示
const formatTime = (dateTime: string) => {
  return dayjs(dateTime).format("HH:mm");
};

// 格式化日期显示
const formatDate = (dateTime: string) => {
  const date = dayjs(dateTime);
  const today = dayjs();
  const tomorrow = dayjs().add(1, "day");

  if (date.isSame(today, "day")) {
    return "今天";
  } else if (date.isSame(tomorrow, "day")) {
    return "明天";
  } else {
    return date.format("MM月DD日");
  }
};

// 开始拖拽调整列宽
const startResize = (column: string, event: MouseEvent) => {
  event.preventDefault();
  resizeState.isResizing = true;
  resizeState.currentColumn = column;
  resizeState.startX = event.clientX;
  resizeState.startWidth = columnWidths[column as keyof typeof columnWidths];
  document.body.style.cursor = "col-resize";
};

// 处理鼠标移动
const handleMouseMove = (event: MouseEvent) => {
  if (!resizeState.isResizing) return;

  const deltaX = event.clientX - resizeState.startX;
  const newWidth = Math.min(Math.max(resizeState.startWidth + deltaX, 80), 242); // 最小80px，最大242px

  if (resizeState.currentColumn in columnWidths) {
    columnWidths[resizeState.currentColumn as keyof typeof columnWidths] = newWidth;
  }
};

// 处理鼠标释放
const handleMouseUp = () => {
  if (resizeState.isResizing) {
    resizeState.isResizing = false;
    resizeState.currentColumn = "";
    document.body.style.cursor = "";
  }
};

// 编辑处理
const handleEdit = (item: any) => {
  console.log("编辑:", item);
  router.push({
    path: "/orderVisit",
    query: {
      scheduleId: item.scheduleId,
    },
  });
};

// 删除处理
const handleDelete = (item: any) => {
  console.log("删除:", item);
};
</script>

<style scoped lang="less">
.visit-list-container {
  background-color: #fafafa;
  min-height: 100vh;
  padding: 16px;
}

.table-container {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 500;
  color: #424242;
  font-size: 14px;
}

.header-cell {
  position: relative;
  padding: 12px 8px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  user-select: none;

  &:last-child {
    border-right: none;
  }

  &.actions-header {
    width: 120px;
    flex-shrink: 0;
  }
}

.resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;

  &:hover {
    background-color: #2196f3;
  }
}

.table-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #f9f9f9;
  }

  &:last-child {
    border-bottom: none;
  }
}

.table-cell {
  padding: 12px 8px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #424242;
  overflow: hidden;

  &:last-child {
    border-right: none;
  }

  &.actions-cell {
    width: 120px;
    flex-shrink: 0;
    gap: 8px;
  }
}

.time-cell {
  .time-content {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .time {
      font-weight: 500;
      color: #1976d2;
      font-size: 13px;
    }

    .date {
      font-size: 11px;
      color: #757575;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  }
}

.subject-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;

  .subject-text {
    font-weight: 400;
    color: #212121;
    line-height: 1.3;
    word-break: break-word;
  }

  .status-badge {
    display: inline-block;
    padding: 2px 6px;
    background-color: #fff3e0;
    color: #ff9800;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    align-self: flex-start;
  }
}

.action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  &.edit {
    background-color: #e3f2fd;
    color: #1976d2;

    &:hover {
      background-color: #bbdefb;
    }

    &:active {
      background-color: #90caf9;
    }
  }

  &.delete {
    background-color: #ffebee;
    color: #d32f2f;

    &:hover {
      background-color: #ffcdd2;
    }

    &:active {
      background-color: #ef9a9a;
    }
  }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;

  .empty-text {
    font-size: 16px;
    color: #757575;
    margin: 0;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .visit-list-container {
    padding: 8px;
  }

  .table-header,
  .table-row {
    font-size: 12px;
  }

  .header-cell,
  .table-cell {
    padding: 8px 4px;
  }

  .time-cell .time-content {
    .time {
      font-size: 11px;
    }

    .date {
      font-size: 10px;
    }
  }

  .action-btn {
    padding: 3px 6px;
    font-size: 10px;
  }
}
</style>
